﻿@model TestsModel.Data.MatchTest
@{
    ViewBag.TestId = Guid.NewGuid().ToString();
}

<link href="@Url.Content("~/Content/Shared/Editor Templates/MatchTest.css")" rel="stylesheet" type="text/css"/>

<fieldset>
    <legend>Set the correct correspondings</legend>

    <div id="matchTestContainer">
        <canvas id="matchTestCanvas"></canvas>
        <div id="matchTestLeftBlock">
            @for (int i = 0; i < Model.LeftStatements.Count; i++)
            {
                <div class="k-button matchTestLeftStatement" id="@String.Format(ViewBag.TestId + "_left_" + i)">
                    @Html.Label("", Model.LeftStatements[i].Item1)
                    @Html.HiddenFor(model => model.LeftStatements[i].Item2)
                </div>
            }
        </div>
        <div id="matchTestRightBlock">
            <ul>
            @foreach (var rightStatement in Model.RightStatements)
            {<li>
                <div class="matchTestRightStatement" id="@String.Format(ViewBag.TestId + "_right_" + rightStatement.Key)">
                    @Html.Label("", rightStatement.Value)
                    @Html.HiddenFor(model => rightStatement.Key)
                </div></li>
            }
                </ul>
        </div>
    </div>
</fieldset>

<script src="@Url.Content("~/Scripts/CanvasUtils.js")"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var matchTestCanvas = $("#matchTestCanvas");
        var matchTestContainer = $("#matchTestContainer");
        resetCanvas(matchTestCanvas, matchTestContainer);
    });

    $(".matchTestLeftStatement").kendoDraggable({
        hint: function(element) {
            return element.clone();
        },
        group: "matchTestGroup"
    });
    $(".matchTestRightStatement").kendoDropTarget({
        dragenter: droptargetOnDragEnter,
        dragleave: droptargetOnDragLeave,
        drop: onDrop,
        group: "matchTestGroup"
    });
    
    var pairedElements = [];

    function onDrop(e) {
        e.dropTarget.removeClass("rightStatementHighlighted");

        var leftStatement = e.draggable.element[0];
        var rightStatement = e.dropTarget[0];

        var rightId = rightStatement.children[1].value;

        leftStatement.children[1].setAttribute("value", rightId);

        var matchTestCanvas = $("#matchTestCanvas");
        var matchTestContainer = $("#matchTestContainer");

        var alreadyAdded = false;
        for (var i = 0; i < pairedElements.length; i++) {
            if (pairedElements[i][0] == e.draggable.element) {
                pairedElements[i][1] = e.dropTarget;
                alreadyAdded = true;
                break;
            }
        }

        if (!alreadyAdded)
            pairedElements.push([e.draggable.element, e.dropTarget]);

        drawLineBetweenElements(pairedElements, matchTestCanvas, matchTestContainer);
    }
    function droptargetOnDragEnter(e) {
        e.dropTarget.addClass("rightStatementHighlighted");
    }
    function droptargetOnDragLeave(e) {
        e.dropTarget.removeClass("rightStatementHighlighted");
    }
</script>
